<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #container {
            position: relative;
            text-align: center;
        }
        img {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            object-fit: cover;
        }
        #audio {
            display: none;
        }
        #result {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
            z-index: 999;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="container">
        <img src="gifAndmp3/gamecity1.gif" alt="抽奖GIF图">
        <audio id="audio" src="gifAndmp3/bgm.MP3" autoplay></audio>
        <div id="result">恭喜你获得奖品！</div>
    </div>
    <script>
    // 假设您已经从服务器获取了正确的微信JS-SDK配置信息
var wxConfig = {
    debug: false,
    appId: 'wx30142f715391a187', // 替换为你的微信公众号appid
    timestamp: 'yourTimestamp', // 替换为你从服务器获取的timestamp
    nonceStr: 'your-nonce-str', // 替换为你从服务器生成的nonceStr
    signature: 'your-signature', // 替换为你从服务器生成的签名signature
    jsApiList: ['onMenuShareAppMessage', 'onWXReady'] // 添加'onWXReady'到需要使用的JS接口列表
};

wx.config(wxConfig);

// 微信JS-SDK准备就绪后执行音频播放
wx.ready(function() {
    audioAutoPlay();
});

// 定义一个函数用于处理微信内音频自动播放
function audioAutoPlay() {
    var audio = document.getElementById('audio');

    // 监听WeixinJSBridgeReady事件，在微信内直接尝试播放音频
    if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
        audio.play();
    } else {
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
}

// 音乐播放/暂停控制函数（保留原功能不变）
function musicPlay(isPlay) {
    var media = document.querySelector('#audio');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}

// 保持原有逻辑：19秒后隐藏GIF图并显示抽奖结果
setTimeout(function() {
    document.querySelector('img').style.display = 'none';
    document.getElementById('result').style.display = 'block';
}, 19000);
    </script>
</body>
</html>
